<template>
    <h3>理财项目列表</h3>
    <table>
        <thead>
            <tr style="background-color:aqua;">
                <td>理财编号</td>
                <td>理财名称</td>
                <td>年收益</td>
                <td>月收益</td>
                <td>最低金额</td>
                <td>理财人数</td>
                <td>风险等级</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in data" :key="item.F_Id">
                <td hidden>{{ item.UF_Id }}</td>
                <td>{{ item.F_Id }}</td>
                <td>{{ item.F_Name }}</td>
                <td>{{ item.F_APY }}%</td>
                <td>{{ (item.F_APY / 12).toFixed(2) }}%</td>
                <td>{{ item.F_MinMoney.toFixed(2) }}CNY</td>
                <td>{{ item.F_Number }}</td>
                <td>{{ item.F_Level == 0 ? '低风险' : (item.F_Level == 1 ? '中风险' : '高风险') }}</td>
                <td><a href="#" @click="UserRedeem(item.UF_Id)">赎回</a></td>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import { onMounted, ref } from 'vue'
import axios from 'axios';
import { useUserStore } from '../../store/index.ts'
import { useRouter } from 'vue-router';

//实例仓库
const userStore = useUserStore();

//实例路由
const router = useRouter();

//创建响应式数组对象
const data = ref([{
    UF_Id: 0,
    F_Id: '',
    F_Name: '',
    F_APY: 0,
    F_MinMoney: 0,
    F_Number: '',
    F_Level: 0
}])

onMounted(() => {
    axios({
        method: 'get',
        url: 'https://localhost:44305/api/Finans/GetUserFinanInfo',
        params: {
            Uid: userStore.UserLoginId
        }
    })
        .then(function (res) {
            data.value = res.data;
        })
        .catch(function (error) {
            console.log(error);
        })
})

//跳转用户赎回页面
const UserRedeem = (UFid: number) => {
    router.push({
        name: "UserFinanRedeemPage",
        params: { UFid: UFid }
    })

}
</script>